<template>
  <page-container>
    <app-card>
      <template #header>
        <el-button
          icon="el-icon-back"
          @click="$router.back()"
        >
          返回
        </el-button>
      </template>
      <el-form
        ref="form"
        :model="article"
        :rules="formRules"
        label-width="100px"
      >
        <el-tabs model-value="baseInfo">
          <el-tab-pane
            label="文章信息"
            name="baseInfo"
          >
            <el-row>
              <el-col
                :md="12"
                :xs="24"
              >
                <el-form-item
                  label="标题"
                  prop="title"
                >
                  <el-input v-model="article.title" />
                </el-form-item>
              </el-col>

              <el-col
                :md="12"
                :xs="24"
              >
                <el-form-item
                  label="作者"
                  prop="author"
                >
                  <el-input v-model="article.author" />
                </el-form-item>
              </el-col>
              <el-col
                :md="12"
                :xs="24"
              >
                <el-form-item
                  label="文章分类"
                  prop="cid"
                >
                  <el-select
                    v-model="article.cid"
                  >
                    <el-option
                      v-for="item in articleCates"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :md="12"
                :xs="24"
              >
                <el-form-item
                  label="文章简介"
                  prop="synopsis"
                >
                  <el-input
                    type="textarea"
                    v-model="article.synopsis"
                    :rows="4"
                    placeholder="请输入文章简介"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :md="12"
                :xs="24"
              >
                <el-form-item
                  label="图文封面"
                  prop="image_input"
                >
                  <!-- :options="{maxSelect: 1}" -->
                  <app-image-upload-input
                    v-model="article.image_input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <el-tabs model-value="content">
          <el-tab-pane
            label="文章内容"
            name="content"
          >
            <el-form-item
              label="文章内容"
              prop="content"
            >
              <app-text-editor v-model="article.content" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

        <el-tabs model-value="others">
          <el-tab-pane
            label="其他设置"
            name="others"
          >
            <el-form-item
              label="banner显示"
              prop="is_banner"
            >
              <el-radio-group v-model="article.is_banner">
                <el-radio :label="1">
                  显示
                </el-radio>
                <el-radio :label="0">
                  不显示
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="热门文章"
              prop="is_hot"
            >
              <el-radio-group v-model="article.is_hot">
                <el-radio :label="1">
                  开启
                </el-radio>
                <el-radio :label="0">
                  关闭
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleSubmit"
          >
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </app-card>
  </page-container>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getArticleCategorys, saveArticle, getArticleById } from '@/api/article'
import type { ArticleCategory, ArticleForm } from '@/api/types/article'
import type { IElForm, IFormRule } from '@/types/element-plus'
import { ElMessage } from 'element-plus'
import router from '@/router/index'

const props = defineProps({
  id: {
    type: String,
    default: null
  }
})

const articleCates = ref<ArticleCategory[]>([]) // 文章分类
const article = ref<ArticleForm>({
  id: undefined,
  cid: '',
  title: '',
  author: '',
  image_input: '',
  synopsis: '',
  share_title: '',
  share_synopsis: '',
  visit: '',
  sort: 0,
  url: '',
  status: 0,
  is_hot: 0,
  is_banner: 0,
  content: ''
})

const formRules = ref<IFormRule>({
  title: [
    { required: true, message: '请输入文章标题', trigger: 'blur' }
  ],
  cid: [
    { required: true, message: '请选择文章分类', trigger: 'blur' }
  ],
  image_input: [
    { required: true, message: '请上传文章封面', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入文章内容', trigger: 'blur' }
  ]
})

const form = ref<IElForm | null>(null)

const loadArticle = async () => {
  const { info } = await getArticleById(Number(props.id))
  // 赋值给article
  article.value = { ...info, image_input: info.image_input ? info.image_input[0] : '' }
}

onMounted(() => {
  loadCates()
  // 如果路由中有props id，则根据id加载article数据
  if (props.id) {
    loadArticle()
  }
})

const handleSubmit = async () => {
  const valid = await form.value?.validate()
  if (!valid) return false
  await saveArticle(article.value)
  ElMessage.success('保存成功')
  router.push({
    name: 'article-list'
  })
}

const loadCates = async () => {
  const { list } = await getArticleCategorys({ type: 0 })
  articleCates.value = list
}
</script>
<style lang="scss" scoped>
:deep(.el-form-item__content) {
  overflow: hidden;
}

:deep(.el-space) {
  max-width: 100%;
  .el-space__item {
    max-width: 100%;
  }
}
</style>
